<template>
  <div class="network-security-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">网络安全管理流程</h2>
      </div>
    </div>

    <div class="content">
      <!-- 流程步骤 -->
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(step, index) in processSteps" 
                 :key="index" 
                 :title="step.title"
                 :description="step.description"
                 @click.native="goToStep(index)">
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <!-- 步骤内容 -->
      <el-card class="step-content" shadow="hover">
        <template v-if="currentStepInfo">
          <div class="step-header">
            <h3>
              <i :class="currentStepInfo.icon"></i>
              {{ currentStepInfo.title }}
            </h3>
            <p class="description">{{ currentStepInfo.description }}</p>
          </div>

          <div class="step-body">
            <el-form 
              ref="stepForm"
              :model="formData"
              :rules="rules"
              label-width="120px">
              
              <!-- 风险评估表单 -->
              <template v-if="currentStep === 0">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="评估对象" prop="target">
                      <el-select v-model="formData.target" placeholder="请选择评估对象">
                        <el-option label="网络设备" value="network"></el-option>
                        <el-option label="服务器" value="server"></el-option>
                        <el-option label="应用系统" value="application"></el-option>
                        <el-option label="数据资产" value="data"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="风险等级" prop="riskLevel">
                      <el-rate v-model="formData.riskLevel" :colors="riskColors"></el-rate>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item label="风险描述" prop="riskDescription">
                  <el-input type="textarea" v-model="formData.riskDescription" rows="4"></el-input>
                </el-form-item>

                <el-form-item label="建议措施" prop="suggestions">
                  <el-input type="textarea" v-model="formData.suggestions" rows="4"></el-input>
                </el-form-item>
              </template>

              <!-- 安全监控表单 -->
              <template v-if="currentStep === 1">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="监控项目" prop="monitorItem">
                      <el-select v-model="formData.monitorItem" multiple placeholder="请选择监控项目">
                        <el-option label="网络流量" value="traffic"></el-option>
                        <el-option label="系统日志" value="syslog"></el-option>
                        <el-option label="安全事件" value="security"></el-option>
                        <el-option label="性能指标" value="performance"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="监控周期" prop="monitorPeriod">
                      <el-select v-model="formData.monitorPeriod" placeholder="请选择监控周期">
                        <el-option label="实时" value="realtime"></el-option>
                        <el-option label="每小时" value="hourly"></el-option>
                        <el-option label="每天" value="daily"></el-option>
                        <el-option label="每周" value="weekly"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item label="告警规则" prop="alertRules">
                  <el-table :data="formData.alertRules" border>
                    <el-table-column prop="metric" label="监控指标" width="180">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.metric"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="threshold" label="阈值" width="150">
                      <template slot-scope="scope">
                        <el-input-number v-model="scope.row.threshold" :min="0"></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column prop="operator" label="条件" width="120">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.operator">
                          <el-option label="大于" value="gt"></el-option>
                          <el-option label="小于" value="lt"></el-option>
                          <el-option label="等于" value="eq"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column prop="level" label="告警级别" width="120">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.level">
                          <el-option label="一般" value="normal"></el-option>
                          <el-option label="重要" value="important"></el-option>
                          <el-option label="紧急" value="urgent"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button type="text" @click="removeAlertRule(scope.$index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="margin-top: 10px;">
                    <el-button type="primary" size="small" @click="addAlertRule">添加规则</el-button>
                  </div>
                </el-form-item>
              </template>

              <!-- 事件处理表单 -->
              <template v-if="currentStep === 2">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="事件类型" prop="incidentType">
                      <el-select v-model="formData.incidentType" placeholder="请选择事件类型">
                        <el-option label="网络攻击" value="attack"></el-option>
                        <el-option label="系统故障" value="failure"></el-option>
                        <el-option label="数据泄露" value="leak"></el-option>
                        <el-option label="违规操作" value="violation"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="处理人员" prop="handler">
                      <el-select v-model="formData.handler" multiple placeholder="请选择处理人员">
                        <el-option
                          v-for="item in handlers"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item label="事件描述" prop="incidentDescription">
                  <el-input type="textarea" v-model="formData.incidentDescription" rows="4"></el-input>
                </el-form-item>

                <el-form-item label="处理措施" prop="solutions">
                  <el-input type="textarea" v-model="formData.solutions" rows="4"></el-input>
                </el-form-item>

                <el-form-item label="处理结果" prop="result">
                  <el-radio-group v-model="formData.result">
                    <el-radio label="resolved">已解决</el-radio>
                    <el-radio label="processing">处理中</el-radio>
                    <el-radio label="pending">待处理</el-radio>
                  </el-radio-group>
                </el-form-item>
              </template>

              <!-- 总结报告表单 -->
              <template v-if="currentStep === 3">
                <el-form-item label="报告总结" prop="summary">
                  <el-input type="textarea" v-model="formData.summary" rows="6"></el-input>
                </el-form-item>

                <el-form-item label="改进建议" prop="improvements">
                  <el-input type="textarea" v-model="formData.improvements" rows="4"></el-input>
                </el-form-item>

                <el-form-item label="附件" prop="attachments">
                  <el-upload
                    action="/api/upload"
                    :file-list="formData.attachments"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple>
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传 doc/pdf 文件，且不超过 10MB</div>
                  </el-upload>
                </el-form-item>
              </template>
            </el-form>
          </div>

          <div class="step-footer">
            <el-button v-if="currentStep > 0" @click="prevStep">上一步</el-button>
            <el-button 
              type="primary" 
              @click="nextStep"
              :loading="submitting">
              {{ currentStep === processSteps.length - 1 ? '完成' : '下一步' }}
            </el-button>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NetworkSecurityProcess',
  data() {
    return {
      currentStep: 0,
      submitting: false,
      processSteps: [
        {
          title: '风险评估',
          description: '评估网络安全风险',
          icon: 'el-icon-warning'
        },
        {
          title: '安全监控',
          description: '配置监控规则',
          icon: 'el-icon-monitor'
        },
        {
          title: '事件处理',
          description: '处理安全事件',
          icon: 'el-icon-bell'
        },
        {
          title: '总结报告',
          description: '生成安全报告',
          icon: 'el-icon-document'
        }
      ],
      formData: {
        // 风险评估
        target: '',
        riskLevel: 3,
        riskDescription: '',
        suggestions: '',
        
        // 安全监控
        monitorItem: [],
        monitorPeriod: '',
        alertRules: [],
        
        // 事件处理
        incidentType: '',
        handler: [],
        incidentDescription: '',
        solutions: '',
        result: '',
        
        // 总结报告
        summary: '',
        improvements: '',
        attachments: []
      },
      rules: {
        // 表单验证规则
      },
      riskColors: ['#99A9BF', '#F7BA2A', '#FF9900', '#FA5555', '#FF0000'],
      handlers: [
        { id: 1, name: '张工' },
        { id: 2, name: '李工' },
        { id: 3, name: '王工' }
      ]
    }
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep]
    }
  },
  methods: {
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    async nextStep() {
      try {
        await this.$refs.stepForm.validate()
        if (this.currentStep < this.processSteps.length - 1) {
          this.currentStep++
        } else {
          await this.submitProcess()
        }
      } catch (error) {
        // 表单验证失败
      }
    },
    async submitProcess() {
      this.submitting = true
      try {
        // TODO: 提交数据到后端
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$message.success('流程提交成功')
        this.$router.push('/main/process')
      } catch (error) {
        this.$message.error('提交失败')
      } finally {
        this.submitting = false
      }
    },
    addAlertRule() {
      this.formData.alertRules.push({
        metric: '',
        threshold: 0,
        operator: 'gt',
        level: 'normal'
      })
    },
    removeAlertRule(index) {
      this.formData.alertRules.splice(index, 1)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleRemove(file, fileList) {
      this.formData.attachments = fileList
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style lang="scss" scoped>
.network-security-process {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .header {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    
    .header-content {
      position: relative;
      text-align: center;

      .back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }
    }
  }

  .content {
    .el-steps {
      margin-bottom: 30px;
      padding: 20px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    }

    .step-content {
      .step-header {
        margin-bottom: 30px;
        text-align: center;

        h3 {
          margin: 0 0 10px;
          font-size: 20px;
          color: #303133;

          i {
            margin-right: 8px;
            color: #409EFF;
          }
        }

        .description {
          margin: 0;
          color: #606266;
        }
      }

      .step-body {
        max-width: 800px;
        margin: 0 auto;
      }

      .step-footer {
        margin-top: 30px;
        text-align: center;

        .el-button {
          min-width: 120px;
          margin: 0 10px;
        }
      }
    }
  }
}

:deep(.el-step__icon) {
  cursor: pointer;
}
</style> 